<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>单词</title>
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/easyui.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/icon.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/panel.css">
  <link rel="stylesheet" type="text/css" href="<%=path %>/style/neweasyui/themes/gray/window.css">
  <script type="text/javascript" src="<%=path %>/script/1.11.1.js"></script>
  <script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="<%=path %>/script/dateFormat.js"></script>
  <script type="text/javascript" src="<%=path %>/script/datagrid-bufferview.js"></script>
  <script type="text/javascript" src="<%=path %>/script/common.js"></script>
  <script type="text/javascript" src="<%=path %>/script/ckeditor/ckeditor.js"></script>
  <style type="text/css">
    #fm{
      margin:0;
      padding:10px 30px;
    }
    .ftitle{
      font-size:14px;
      font-weight:bold;
      padding:5px 0;
      margin-bottom:10px;
      border-bottom:1px solid #ccc;
    }
    .fitem{
      margin-bottom:17px;
    }
    .fitem label{
      display:inline-block;
      width:80px;
    }
    .fitem input{
      width:230px;
    }
  </style>
</head>
<body>
<table id="tt" title="class" style="width:auto;height:830px">
</table>
<!-----------------------------------------------------------------按钮------------------------------------------------------------------->
<div id="toolbar" style="padding:5px;height:auto">
  <div>
  	  clsGateId：<input id="clsGateId" type="text"  name="clsGateId"  class="easyui-numberbox validatebox" validType="length[0,10]"  style="width:150px"  />&nbsp;&nbsp;
  	  code：<input id="code"  name="code" type="text" class="easyui-textbox validatebox"   missingMessage="xxx必须填写" validType="length[0,10]"  style="width:150px" />&nbsp;&nbsp;
  	  word：<input id="word"  name="word" type="text" class="easyui-textbox validatebox"  validType="length[0,56]" style="width:150px" />&nbsp;&nbsp;
  	  wordCn：<input id="wordCn"  name="wordCn" type="text" class="easyui-textbox" validType="length[0,20]" style="width:150px" />&nbsp;&nbsp;
    <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-search" onclick="searchSentence()">查询</a>
  
    <!-- 搜索条件结束 -->
    <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-edit" onclick="editClass()">修改</a>&nbsp;
   <!--   <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-add" onclick="addAd()">添加</a>&nbsp;-->
   <!--   <a href="javascript:void(0)"  class="easyui-linkbutton" iconCls="icon-remove" onclick="deleteClass()">删除</a>&nbsp;&nbsp;-->

  </div>
</div>
<!-------------------------------------------------------------添加/编辑框 开始----------------------------------------------------------------------->
<!-- 添加/编辑框 开始-->
<div id="addad" class="easyui-dialog"
     style="width:1400px; height:600px; padding: 10px 20px" fit="true" closed="true"
     buttons="#dlg-buttons">
  <div class="ftitle">单词</div>
  <form id="inAddAd" method="post"  validate enctype="multipart/form-data">
    <input type="hidden" name="id" id="cls_id" />

    <div class="fitem">
      <label>code:</label>
      <input  class="easyui-textbox" name="code" id="code" value=""  validate validType="length[0,10]"/>
    </div>
         
    <div class="fitem">
      <label>word:</label>
      <textarea  rows="2" cols="10" style="width: 80%" class="textarea easyui-validatebox" id="word" name="word" validate validType="length[0,56]" ></textarea>
    </div>
    <div class="fitem">
      <label>word_cn:</label>
      <textarea  rows="2" cols="10" style="width: 80%" class="textarea easyui-validatebox" id="wordCn" name="wordCn" validate validType="length[0,20]"></textarea>
    </div>
    <div class="fitem">
      <label>audio_code:</label>
      <textarea  rows="2" cols="10" style="width: 80%" class="textarea easyui-validatebox" name="audioCode" id="audioCode"  validate validType="length[0,56]"></textarea>
    </div>
    <div class="fitem">
      <label>img:</label>
      <textarea rows="2" cols="10" style="width: 80%" class="textarea easyui-validatebox" name="img" id="img" value="" validate validType="length[0,256]" ></textarea>
    </div>
    <div class="fitem">
      <label>sample:</label>
      <textarea rows="5" cols="10" style="width: 80%" class="textarea easyui-validatebox" name="sample" id="sample" value="" validate validType="length[0,1024]"></textarea>
    </div>
    <div class="fitem">
      <label>sample_cn:</label>
      <textarea rows="5" cols="10" style="width: 80%" class="textarea easyui-validatebox" name="sampleCn" id="sampleCn" value="" validate validType="length[0,1024]" ></textarea>
    </div>
    <div class="fitem">
      <label>option1:</label>
      <input  class="easyui-textbox" name="option1" id="option1" value="" validate validType="length[0,20]" />
    </div>
    <div class="fitem">
      <label>option2:</label>
      <input  class="easyui-textbox" name="option2" id="option2" value="" validate validType="length[0,20]" />
    </div>
    <div class="fitem">
      <label>option3:</label>
      <input  class="easyui-textbox" name="option3" id="option3" value="" validate validType="length[0,20]"/>
    </div>
    <div class="fitem">
      <label>option4:</label>
      <input  class="easyui-textbox" name="option4" id="option4" value="" validate validType="length[0,20]"/>
    </div>
    <div class="fitem">
      <label>cls_gate_id:</label>
      <input  class="easyui-numberbox" name="clsGateId" id="clsGateId" value="" validate validType="length[0,10]"/>
    </div>
    
  </form>
  <div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6"  iconCls="icon-ok" onclick="saveOrUpdateAd()" style="width: 90px">Save</a> 
    <a href="javascript:void(0)" class="easyui-linkbutton"  iconCls="icon-cancel" onclick="closeDialog()" style="width: 90px">Cancel</a>
  </div>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------>

<!-- 添加/编辑框结束-->




</body>
<script type="text/javascript">
  var class_id,course_id,gate_id;
  $.ajaxSetup({cache:false});
  $(function(){
    $('#tt').datagrid({
      url:'<%=basePath %>word/listAll',
      method:'get',
      singleSelect:true,toolbar:'#toolbar',remoteSort:false,pageSize:50,nowrap:false,
      fitColumns:true,pagination:true,rownumbers:true,
      columns:[[
        {field:'id',title:'ID',sortable:true,width:20},
        {field:'code',title:'code',sortable:true,width:30},
        {field:'word',title:'word',sortable:true,width:80},
        {field:'wordCn',title:'word_cn',sortable:true,width:80},
        {field:'audioCode',title:'audio_code',sortable:true,width:50},
        {field:'img',title:'img',sortable:true,width:100},
        {field:'sample',title:'sample',sortable:true,width:200},
        {field:'sampleCn',title:'sample_cn',sortable:true,width:200},
        {field:'option1',title:'option1',sortable:true,width:28},
        {field:'option2',title:'option2',sortable:true,width:28},
        {field:'option3',title:'option3',sortable:true,width:28},
        {field:'option4',title:'option4',sortable:true,width:28},
        {field:'clsGateId',title:'cls_gate_id',sortable:true,width:35}
      ]],
    
    });
  });
//------------------------------------------------------------------------------------------
  //关闭弹出框
  function closeDialog(){
    $('#addad').dialog('close') ;
  }

  //添加广告
  function addAd(){
    $('#addad').dialog('open').dialog('setTitle','添加广告');
    $('#inAddAd').form('clear');
    CKEDITOR.instances.content.setData();
    url = '<%=basePath%>service/ad/add';
  }
  //修改广告
  function editClass(){
    url = '<%=basePath%>word/edit';
    var row = $('#tt').datagrid('getSelected');
    if (row){
      $("#cls_id").val(row.id);
      $("#code").val(row.code);
      $("#word").val(row.word);
      $("#wordCn").val(row.wordCn);
      $("#audioCode").val(row.audioCode);
      $("#img").val(row.img);
      $("#sample").val(row.sample);
      $("#sample_cn").val(row.sample_cn);
      $("#option1").val(row.option1);
      $("#option2").val(row.option2);
      $("#option3").val(row.option3);
      $("#option4").val(row.option4);
      $("#clsGateId").val(row.clsGateId);
      $('#addad').dialog('open').dialog('setTitle','单词编辑');
      $('#inAddAd').form('load',row);
    }
  }


  function deleteClass(){

    var row = $('#tt').datagrid('getSelected');
    if (row){
      $.messager.confirm('提示','确定要删除这个广告吗？',function(r){
        if (r){
          $.post('<%=basePath%>service/ad/remove',{id:row.id},function(result){
            $('#tt').datagrid('reload');    // reload the data
          },'json');
        }
      });
    }
  }
//---------------------------------------------------------------------------------------------------------------------------
  //添加或修改广告
  function saveOrUpdateAd(){

    $('#inAddAd').form('submit', {
      url : url,
      onSubmit : function() {
        return $(this).form('validate');
      },
      success : function(result) {
    	var Data = eval('(' + result + ')');   	  
        if (result.status) {
          $.messager.show({
            title : 'Error',
            msg : '服务器出错，请稍后再试'
          });
        }else if(Data.status == '-1'){
        	$.messager.show({
                title : '提示',
                msg : '此时有正在活动的单词,请先调整'
              });
        	return;
        }else {
          $('#addad').dialog('close'); // close the dialog
          $('#tt').datagrid('reload'); // reload the data
        }
      }
    });
  }



  function searchSentence(){
	  var clsGateId = $("#clsGateId").textbox("getValue");
	  var code = $("#code").textbox("getValue");
	  var word = $("#word").textbox("getValue");
	  var wordCn = $("#wordCn").textbox("getValue");
		 var url = '<%=basePath %>word/listAll?clsGateId='+clsGateId+'&code='+code+'&word='+word+'&wordCn='+wordCn;
		 url =encodeURI(encodeURI(url));
		 $("#tt").datagrid({
			 url:url,
			 method:'get',
			 onLoadSuccess:function(data){
				 if(data.total == null){
					 $.messager.alert("提示","没有查询到任何符合条件的数据")
				 }
			 }
		 });
  }

  

</script>
</html>
